<template>
  <div class="zh-student-leave">
    <nav-header></nav-header>
    <div class="zh-table">
      <div class="zh-table-open clear">
        <div class="zh-open-left fl">
          <div class="open-width" style="width: 120px">
            <el-select v-model="grade_id" filterable placeholder="请选择">
              <el-option v-for="item in gradeData" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </div>
          <div class="open-width" style="width: 120px">
            <el-select v-model="leave_type" filterable placeholder="请选择">
              <el-option v-for="(item, index) in statusOptons" :key="index" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div class="open-width" style="width: 270px">
            <el-input v-model="keyword" placeholder="请输入学生姓名、账号搜索" @keyup.enter.native="searchFunc"></el-input>
          </div>
          <el-button type="primary" @click="searchFunc">搜索</el-button>
          <el-button type="primary" @click="reset">重置</el-button>
        </div>
        <div class="zh-open-right fr">
        </div>
      </div>
      <div class="zh-table-contents">
        <el-table :data="listData" border max-height="600" style="width: 100%">
          <el-table-column type="index" :index="typeIndex" label="序号" align="center" show-overflow-tooltip width="50">
          </el-table-column>
          <el-table-column prop="name" label="用户名" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="number" label="账号" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="gradename" label="年级" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="class_name" label="班级" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="create_time" label="申请时间" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="start_time" label="请假开始时间" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="end_time" label="请假结束时间" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="date_type" label="请假状态" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="5" label="操作" align="center" width="150" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-button @click="lookOver(scope.row.id)" type="text">查看</el-button>
              <template v-if="parseInt(scope.row.status) === 2 && checkAuth(scope.row)">
                <el-button @click="change_confirm(scope.row, 2)" type="text">批准</el-button>
                <el-button @click="change_confirm(scope.row, 7)" type="text">拒绝</el-button>
              </template>
              <template
                v-if="(parseInt(scope.row.status) === 1 || parseInt(scope.row.status) === 3) && checkAuth(scope.row)">
                <el-button @click="change_confirm(scope.row, 6)" type="text" class="delete-button">删除</el-button>
              </template>
            </template>
          </el-table-column>
        </el-table>
        <div class="table-pagination" v-show="total_number > 10">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="listParam.page_index" :page-sizes="[10, 20, 30, 40, 50, 100]" :page-size="listParam.page_size"
            layout="total, sizes, prev, pager, next, jumper" :total="total_number">
          </el-pagination>
          <div class="pagination-button">
            <el-button @click="getList" type="primary" icon="el-icon-refresh" circle title="刷新数据" size="mini">
            </el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      gradeData: [],
      listParam: {
        grade_id: 0,
        leave_type: 0,
        keyword: '',
        data_type: 0,
        page_index: 1,
        page_size: 10,
        origin: 0
      },
      grade_id: 0,
      leave_type: 0,
      keyword: '',
      listData: [],
      total_number: 0,
      statusOptons: [{
        value: 0,
        label: '全部状态'
      }, {
        value: '1',
        label: '已批准'
      }, {
        value: '3',
        label: '已拒绝'
      }, {
        value: '2',
        label: '未审批'
      }],
      approveParam: {
        leaveid: 0,
        status: 0,
        reason_content: '',
      },
      approveStatusArr: { 2: '批准', 6: '删除', 7: '拒绝' }
    }
  },
  created() {
    this.getGrade();
    this.getList();
  },
  methods: {
    searchFunc() {
      this.listParam.grade_id = this.grade_id;
      this.listParam.leave_type = this.leave_type;
      this.listParam.keyword = this.keyword;
      this.listParam.page_index = 1;
      this.getList();
    },
    reset() {
      this.grade_id = 0;
      this.leave_type = 0;
      this.keyword = '';
      this.listParam = {
        grade_id: 0,
        leave_type: 0,
        keyword: '',
        data_type: 0,
        page_index: 1,
        page_size: 10,
        origin: 0
      },
        this.getList();
    },
    lookOver(id) {
      this.$router.push('/affairs/leave/student-leave-details/' + id)
    },
    // 序号
    typeIndex(index) {
      return index + (this.listParam.page_index - 1) * this.listParam.page_size + 1;
    },
    //root 对所有请假做操作
    //超级管理员 对所有请假做操作
    //普通管理员 对应指定的批假人才能操作
    checkAuth(obj) {
      // if([1, 2].includes(this.$g.user_id) || +obj.approve_id === this.$g.user_id) {
      //     return true;
      // }

      return false;
    },
    getList() {
      let success = (data => {
        this.listData = data.data.data;
        this.total_number = data.data.data_sum;
      })
      //执行请求，并将回调方法变成config成员以便鉴权过期可以执行
      this.$ajax.get('api/leave/manage_leave_list', { params: this.listParam, func: { success: success } })
    },
    getGrade() {
      // 重写成功回调
      let success = (data => {
        this.gradeData = data.data;
        this.gradeData.unshift({ id: 0, name: '全部年级' })
      });
      if (this.$store.state.checkLevel) {
        this.$ajax.get("api/newlevel/platform_org", {
          params: {
            level: 3,
            app_code: sessionStorage.getItem('CheckSchoolAppCode'),
          }, func: { success: success },
        });
      } else {
        this.$ajax.get("api/org/all_grade", { params: {}, func: { success: success }, });
      }
    },
    change_confirm(obj, status) {
      let yes = (data => {
        this.approveParam.status = status;
        this.approveParam.leaveid = obj.id
        if (parseInt(status) === 7) {
          this.$prompt('请输入拒绝理由', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
          }).then(({ value }) => {
            if (is_empty(value)) {
              this.$message.warning('请输入拒绝理由');
              pass = false;
            } else {
              this.approveParam.reason_content = value;
              this.change(this.approveParam, status);
            }

          }).catch(() => {

          });
        } else {
          this.change(this.approveParam, status);
        }
      })
      let cancel = (data => { })
      this.e_confirm({ yes: yes, cancel: cancel, txt: '确定' + this.approveStatusArr[parseInt(status)] + ' ' + obj.name + ' 的这条请假申请吗？' });
    },
    change(param, status) {
      let success = (data => {
        this.$message.success(data.msg);

        if (status === 6) {
          if (this.listData.length - this.rowLen === 0) {
            if (this.listParam.page_index > 1) {
              this.listParam.page_index--;
            } else {
              this.listParam.page_index = 1;
            }
          }
        }

        this.getList();
      });
      this.$ajax.put('api/leave/leave', param, { func: { success: success } })
    },
    handleSizeChange(val) {
      this.listParam.page_index = 1;
      this.listParam.page_size = val;
      this.getList()
    },
    handleCurrentChange(val) {
      this.listParam.page_index = val;
      this.getList();
    },
  },
}
</script>
<style lang="scss">
.zh-student-leave {
  .el-table__body-wrapper table tbody {
    td:nth-child(10) {
      padding: 0;
    }
  }
}
</style>
